<template>
	<view class="page-content">
		<view class="address-bg">
			<u-image :src="formdata.photo" height="608rpx" />
		</view>
		<view class="all-content flex-col">
			<navbar>
				<template v-slot:left>
					<view class="header-bar-left">
						<u-icon name="arrow-left" color="#FFFFFF" size="48" @click="handleback"></u-icon>
					</view>
				</template>
			</navbar>
			<view class="publisher">
				<u-image :src="userInfo.avatar.split(',')[0]" height="52rpx" width="52rpx" shape="circle" />
				<view class="username">
					{{ userInfo.nickName||'--' }}
				</view>
			</view>
			<view class="detail-box flex-col">
				<view class="flex-col relative section_3">
					<view class="flex-col group_3">
						<text class="self-stretch font text_3">{{ formdata.title }}</text>
						<view class="flex-row justify-between items-center self-stretch group_4">
							<view class="flex-row items-center" style="width: 70%">
								<view class="shrink-0 section_4"></view>
								<text class="font_2 text_5 ml-5">{{
                  formdata.partyAddress
                }}</text>
							</view>
							<view class="group_5">
								<text class="font_3 text_7">￥</text>
								<text class="text_4">{{ formdata.fees }}</text>
								<text class="font_3 text_6">/只</text>
							</view>
						</view>
						<view class="flex-row justify-between items-center self-stretch group_6">
							<view class="flex-row justify-start items-start relative group_7">
								<image class="image_3"
									src="https://ide.code.fun/api/image?token=66078e54d52b7700115185b5&name=03cd4a4ae7372b066dde35a6da96448b.png" />
								<image class="image_3"
									src="https://ide.code.fun/api/image?token=66078e54d52b7700115185b5&name=03cd4a4ae7372b066dde35a6da96448b.png" />
							</view>
							<view class="flex-row items-center">
								<image class="shrink-0 image_4"
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/65f7eff95a7e3f0310caf882/65f909be731c750011009acd/1fd92388c370a32b34bed6e5dac4da05.png" />
								<text class="ml-4 font_4 text_8">{{ formdata.num }}只</text>
							</view>
						</view>
						<text class="self-start text_9">{{ formdata.partyTime }}</text>
						<text class="self-stretch text_10">
							{{ formdata.remark || "" }}
						</text>
					</view>
					<view class="divider"></view>
					<view class="flex-col group_2 view">
						<view class="flex-row items-center group_8">
							<view class="section_5"></view>
							<text class="font text_11 ml-9">派对地址</text>
						</view>
						<view class="flex-col justify-start items-start section_6">
							<map style="width: 100%; height: 320rpx" :latitude="formdata.lng" :longitude="formdata.lat">
							</map>
							<view class="section_7"></view>
						</view>
					</view>
				</view>
				<view class="bottom-box flex-row items-center">
					<view class="left"> 聊一聊 </view>
					<view v-if="notApply" class="right"> 已申请 </view>
					<view v-else class="right" @click="handleJoinPart"> 申请加入 </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import petParty from "../../../api/petParty.js";
	import mine from "../../../api/mine.js";
	import navbar from "components/common/navbar/navbar.vue";
	export default {
		data() {
			return {
				formdata: {
					distance: "",
					fees: 0.0,
					introduce: "",
					lat: 0,
					lng: 0,
					num: 0,
					partyAddress: "",
					partyTime: "",
					photo: "",
					remark: "",
					title: "",
				},
				partyId: 0,
				userInfo: null,
				notApply: false,
			};
		},
		onLoad(option) {
			uni.showLoading({
				mask: true,
			});
			this.getDetail(option.id);
			this.partyId = option.id;
		},
		methods: {
			handleback() {
				uni.navigateBack();
			},
			handleJoinPart() {
				uni.navigateTo({
					url: "/page_index/pet-party/join-party/join-party?id=" + this.partyId,
				});
			},
			getDetail(id) {
				petParty
					.getPetPartyById(id)
					.then((res) => {
						if (res.code === 200) {
							this.formdata = res.data;
							this.getUserInfo(res.data.userId);
							petParty
								.getPetPartyByUserIdandPartyId(res.data.userId, res.data.id)
								.then((res) => {
									if (res.code === 200) {
										if (res.rows.length > 0) {
											this.notApply = true;
										}
									}
									uni.hideLoading();
								})
								.catch((err) => {
									throw Error();
								});
						} else {
							uni.showToast({
								title: "请求失败",
								icon: "none",
							});
						}
					})
					.catch((err) => {
						uni.hideLoading();
						uni.showToast({
							title: "请求失败",
							icon: "none",
						});
					});
			},
			getUserInfo(id) {
				mine.getUserInfo(id).then((res) => {
					if (res.code === 200) {
						this.userInfo = res.data;
					}
				});
			},
		},
		components: {
			navbar,
		},
	};
</script>

<style lang="scss" scoped>
	.page-content {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		background-color: #f6f6f6;
		position: relative;

		.address-bg {
			height: 608rpx;
			width: 100%;
			background-color: #f6f6f6;
		}

		.all-content {
			padding: 0 32rpx;
			z-index: 999;
			min-height: 100%;
			position: absolute;
			width: 100%;
			top: 0;

			.header-bar-left {
				height: 48rpx;
				margin-bottom: 60rpx;
			}

			.publisher {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
			}

			.detail-box {
				z-index: 999;
				min-height: 100%;
				flex: 1;

				.ml-5 {
					margin-left: 10rpx;
				}

				.ml-9 {
					margin-left: 18rpx;
				}

				.section_3 {
					background-color: #ffffff;
					border-radius: 24rpx;
					flex: 1;
					z-index: 999;

					.group_3 {
						margin: 0 32rpx;
						padding: 40rpx 0;

						.text_3 {
							margin-left: 4rpx;
							margin-right: 12rpx;
							font-weight: unset;
						}

						.group_4 {
							margin-top: 36rpx;
							width: 100%;

							.section_4 {
								background-color: #fcd610;
								border-radius: 50%;
								width: 16rpx;
								height: 16rpx;
							}

							.font_2 {
								font-size: 32rpx;
								font-family: PingFang SC;
							}

							.text_5 {
								color: #333333;
							}

							.group_5 {
								height: 36.3rpx;

								.font_3 {
									font-size: 32rpx;
									font-family: D-DIN;
								}

								.text_7 {
									color: #ff7676;
								}

								.text_4 {
									color: #ff7676;
									font-size: 48rpx;
									font-family: D-DIN;
								}

								.text_6 {
									color: #999999;
								}
							}
						}

						.group_6 {
							margin-top: 32rpx;

							.group_7 {
								.image_3 {
									border-radius: 50%;
									width: 72rpx;
									height: 72rpx;
								}
							}

							.image_4 {
								width: 33.58rpx;
								height: 30.42rpx;
							}

							.font_4 {
								font-size: 24rpx;
								font-family: PingFang SC;
								line-height: 22.04rpx;
								color: #999999;
							}

							.text_8 {
								line-height: 20.76rpx;
							}
						}

						.text_9 {
							margin-top: 40rpx;
							color: #000000;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 700;
							line-height: 20.78rpx;
						}

						.text_10 {
							margin-top: 44rpx;
							color: #999999;
							font-size: 28rpx;
							font-family: PingFang SC;
							line-height: 34rpx;
						}
					}

					.divider {
						background-color: #f6f6f6;
						height: 8rpx;
					}

					.group_2 {
						padding: 0 32rpx;

						.group_8 {
							padding-bottom: 16rpx;

							.section_5 {
								background-color: #fbd610;
								border-radius: 6rpx;
								width: 8rpx;
								height: 40rpx;
							}

							.text_11 {
								line-height: 29.6rpx;
							}
						}

						.section_6 {
							border-radius: 16rpx;
							height: 320rpx;
							width: 100%;
							overflow: hidden;

							// .section_7 {
							// 	margin-left: 292rpx;
							// 	background-color: #fbd610;
							// 	box-shadow: 0rpx 8rpx 8rpx #00000040;
							// 	border-radius: 50%;
							// 	width: 24rpx;
							// 	height: 24rpx;
							// 	border-left: solid 4rpx #ffffff;
							// 	border-right: solid 4rpx #ffffff;
							// 	border-top: solid 4rpx #ffffff;
							// 	border-bottom: solid 4rpx #ffffff;
							// }
						}
					}

					.view {
						margin-top: 44rpx;
					}

					.font {
						font-size: 32rpx;
						font-family: PingFang SC;
						line-height: 29.8rpx;
						font-weight: 700;
						color: #000000;
					}
				}
			}
		}

		.bottom-box {
			.left {
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				padding: 21px 0;
				flex: 1;
				text-align: center;
			}

			.right {
				width: 542rpx;
				height: 88rpx;
				background: #fcd610;
				border-radius: 68rpx 68rpx 68rpx 68rpx;
				text-align: center;
				line-height: 88rpx;
				font-weight: bold;
				font-size: 32rpx;
			}
		}
	}
</style>